<template>
  <ElCard :style="{ 'margin-top': props.marginTop }">
    <template #header>
      <div class="card-header">
        <div class="left">
          <div class="icon">&nbsp;</div>
          <div class="title">动物占全省占比</div>
        </div>
        <div class="right"><ElButton type="primary" @click="onSaveClicked">保存</ElButton></div>
      </div>
    </template>
    <ElForm :model="form" :rules="rules" ref="formRef" status-icon>
      <el-row>
        <el-col :span="8">
          <ElFormItem label="鸟类占全省占比" :label-width="labelWidth" prop="birdsProvince">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.birdsProvince" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
        <el-col :span="8">
          <ElFormItem label="哺乳类占全省占比" :label-width="labelWidth" prop="mammalsProvince">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.mammalsProvince" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
        <el-col :span="8">
          <ElFormItem label="两栖类占全省占比" :label-width="labelWidth" prop="amphibiansProvince">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.amphibiansProvince" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <ElFormItem label="鸟类占保护区占比" :label-width="labelWidth" prop="birdsReserve">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.birdsReserve" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
        <el-col :span="8">
          <ElFormItem label="哺乳类占保护区占比" :label-width="labelWidth" prop="mammalsReserve">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.mammalsReserve" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
        <el-col :span="8">
          <ElFormItem label="两栖类占保护区占比" :label-width="labelWidth" prop="amphibiansReserve">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.amphibiansReserve" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <ElFormItem label="爬行类占全省占比" :label-width="labelWidth" prop="crawlersProvince">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.crawlersProvince" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
        <el-col :span="8">
          <ElFormItem label="昆虫类占全省占比" :label-width="labelWidth" prop="insectsProvince">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.insectsProvince" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
        <el-col :span="8">
          <ElFormItem label="鱼类占全省占比" :label-width="labelWidth" prop="fishProvince">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.fishProvince" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <ElFormItem label="爬行类占保护区占比" :label-width="labelWidth" prop="crawlersReserve">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.crawlersReserve" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
        <el-col :span="8">
          <ElFormItem label="昆虫类占保护区占比" :label-width="labelWidth" prop="insectsReserve">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.insectsReserve" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
        <el-col :span="8">
          <ElFormItem label="鱼类占保护区占比" :label-width="labelWidth" prop="fishReserve">
            <div class="mo-input--number">
              <ElInputNumber v-model="form.fishReserve" controls-position="right" clearable />
              <div class="define-append">%</div>
            </div>
          </ElFormItem>
        </el-col>
      </el-row>
    </ElForm>
  </ElCard>
</template>

<script setup lang="ts" name="ZLSummarizeData">
import { reactive, ref, watch, unref } from 'vue'
import { ElForm, ElFormItem, FormRules, FormInstance } from 'element-plus'
import { TbySummarizeData, saveOrUpdateSummarizeDataAnimal } from '@api/tby/summarize/data/summarizeData'
import { ElMessage } from 'element-plus'
import { validatePercent } from '@api/tby/common/common'

const labelWidth = 180
const form = ref<Partial<TbySummarizeData.Form>>({})

interface FormParamProps {
  id?: number
  formDetail: Partial<TbySummarizeData.Form>
  marginTop: string
}

const props = withDefaults(defineProps<FormParamProps>(), {
  marginTop: '0px'
})

watch(
  () => props.formDetail,
  (n: Partial<TbySummarizeData.Form>) => {
    form.value.birdsProvince = n.birdsProvince
    form.value.birdsReserve = n.birdsReserve
    form.value.mammalsProvince = n.mammalsProvince
    form.value.mammalsReserve = n.mammalsReserve
    form.value.amphibiansProvince = n.amphibiansProvince
    form.value.amphibiansReserve = n.amphibiansReserve
    form.value.crawlersProvince = n.crawlersProvince
    form.value.crawlersReserve = n.crawlersReserve
    form.value.insectsProvince = n.insectsProvince
    form.value.insectsReserve = n.insectsReserve
    form.value.fishProvince = n.fishProvince
    form.value.fishReserve = n.fishReserve
  }
)

watch(
  () => props.id,
  (n?: number) => {
    console.log(n)
    if (n) {
      form.value.id = n
    } else {
      form.value.id = undefined
    }
  }
)

/**面积表单 */
const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  birdsProvince: [
    { required: true, message: '请输入鸟类占全省占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  birdsReserve: [
    { required: true, message: '请输入鸟类占保护区占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  mammalsProvince: [
    { required: true, message: '请输入哺乳类占全省占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  mammalsReserve: [
    { required: true, message: '请输入哺乳类占保护区占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  amphibiansProvince: [
    { required: true, message: '请输入两栖占全省占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  amphibiansReserve: [
    { required: true, message: '请输入两栖占保护区占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  crawlersProvince: [
    { required: true, message: '请输入爬行类占全省占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  crawlersReserve: [
    { required: true, message: '请输入爬行类占保护区占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  insectsProvince: [
    { required: true, message: '请输入昆虫类占全省占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  insectsReserve: [
    { required: true, message: '请输入昆虫类占保护区占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  fishProvince: [
    { required: true, message: '请输入鱼类占全省占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ],
  fishReserve: [
    { required: true, message: '请输入鱼类占保护区占比', trigger: 'blur' },
    { validator: validatePercent, trigger: 'blur' }
  ]
})

const emit = defineEmits(['success'])

const onSaveClicked = () => {
  if (!formRef.value) return
  formRef.value?.validate(valid => {
    if (!valid) {
      return
    }
    const formData = { ...unref(form) }
    saveOrUpdateSummarizeDataAnimal(formData).then(response => {
      if (response.code != 0) {
        ElMessage({
          type: 'error',
          message: response.msg
        })
        return
      }
      ElMessage({
        type: 'success',
        message: '保存成功'
      })
      let data: TbySummarizeData.Form = response.data as TbySummarizeData.Form
      emit('success', data.id)
    })
  })
}
</script>

<style scoped lang="scss">
.card-header {
  height: 25px;
  line-height: 25px;
  .left {
    float: left;
    .icon {
      width: 5px;
      background-color: #104cf0;
      float: left;
    }
    .title {
      float: left;
      margin-left: 5px;
      font-weight: bold;
    }
  }
  .right {
    float: right;
  }
}
.mo-input--number {
  border: 1px solid #dcdfe6;
  display: flex;
  border-radius: 4px;
  .el-input-number--mini {
    flex: 1;
  }
  ::v-deep .el-input__inner {
    border: none !important;
  }
}
.define-append {
  width: 40px;
  display: inline-block;
  background: #f5f7fa;
  padding: 0px 3px;
  border-left: none;
  height: 32px;
  line-height: 32px;
  color: #909399;
  font-size: 12px;
  text-align: center;
}
</style>
